/*
 * @Author: Kingsley 
 * @Date: 2018-10-27 15:09:41 
 * @Last Modified by: mikey.zhaopeng
 * @Last Modified time: 2018-10-28 19:49:11
 */

<template>
    <div class="order-confrim">
        <!-- 1.页头 -->
        <my-header></my-header>

        <!-- 2.分步导航 -->
        <div class="step w" style="margin-top: 50px">
            <el-card shadow="hover">
                <el-steps :active="pageData.step" finish-status="success" simple>
                    <el-step title="1 选择收货地址"></el-step>
                    <el-step title="2 确信订单信息"></el-step>
                    <el-step title="3 提交订单"></el-step>
                </el-steps>
            </el-card>
        </div>

        <breadcrumb class="w bread">
            <span slot="message">选择收货地址</span>
        </breadcrumb>

        <!-- .子组件：收货地址 -->
        <my-address v-on:clickChildAddr="addressIdByChild"></my-address>

        <breadcrumb class="w bread">
            <span slot="message">确认商品信息</span>
        </breadcrumb>

        <!-- .确认的商品列表信息 -->
        <order-confirm-list v-bind:addressId="pageData.addressId"></order-confirm-list>

        <!-- 4.页尾 -->
        <my-footer></my-footer>
    </div>
</template>

<script>
import Breadcrumb from "@/components/Breadcrumb";
import MyHeader from "@/components/Header";
import MyFooter from "@/components/Footer";
import MyAddress from "@/modules/address/Address";
import OrderConfirmList from "./OrderConfirmList";
import Tips from "@/utils/tipsUtil";
import Order from "@/service/order-service";
const _tips = new Tips();
const _order = new Order();

export default {
  data() {
    return {
      //页面数据
      pageData: {
        addressId: null, //收货地址id
        step: 1 //步骤状态
      }
    };
  },
  components: {
    Breadcrumb,
    MyHeader,
    MyFooter,
    MyAddress,
    OrderConfirmList
  },
  methods: {
    /**
     * 1.保存从子组件Address传递过来的id
     */
    addressIdByChild(id) {
      const vue = this;
      vue.pageData.addressId = id;
      if (vue.pageData.addressId) {
        vue.pageData.step = 2;
      } else {
        _tips.notifyTips(vue, "请选中收货地址");
      }
    }
  }
};
</script>

<style scoped lang="scss">
.bread{
    margin-bottom: -35px;
    margin-top: -52PX;
}
</style>
